<script setup>
import { ref } from "vue";
const activeIndex = "1";
import { userStore } from "@/stores/userStore";
const useuserStore = userStore();

const handleCommand = (command) => {
  if (command === 'logout') {
    useuserStore.logout();
  }
};
</script>

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col
          :span="4"
          style="display: flex; flex-direction: row; align-items: center"
        >
          <img src="/images/logo.png" style="height: 60px" />
          <h2 style="padding-left: 4px">技术社区</h2>
        </el-col>
        <el-col :span="8">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            style="border-bottom: none !important"
          >
            <el-menu-item index="1">
                <router-link to="/">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/article">文章</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/course">课程</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="/mall">商城</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col
          :span="8"
          style="height: 60px; line-height: 60px"
          class="hidden-only-sm"
        >
          <el-input placeholder="请输入关键字" />
        </el-col>
        <el-col
          :span="4"
          style="text-align: right; height: 60px; line-height: 60px"
          class="hidden-only-sm;"
        >
        <div v-if="!useuserStore.isLoggedIn">
          <el-link type="primary">
            <router-link to="/login">登录</router-link>
          </el-link>
          <el-link type="primary" style="padding-left: 4px">
            <router-link to="/reg">注册</router-link>
          </el-link>
        </div>
        <div v-else>
          <img src="/images/avatar.png" style="width: 30px; height: 30px; border-radius: 50%" />
          <el-dropdown @command="handleCommand" trigger="contextmenu">
            <el-link type="primary" style="padding-left: 4px ;margin-top:20px ;">
              {{ useuserStore.user.username }}
            </el-link>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="person">
                  <router-link to="/person">个人中心</router-link>
                </el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>

<style scoped>

</style>